<template>
  <div class="articles-container">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <van-cell class="article-wrap" v-for="(article,index) in articleList" :key="index">
          <div class="article" v-if="article.cover.type === 3">
            <h3 class="title">{{article.title}}</h3>
            <van-grid class="pics" :column-num="3" :border="false">
              <van-grid-item>
                <van-image src="article.cover.images[0]" />
              </van-grid-item>
              <van-grid-item>
                <van-image src="article.cover.images[1]" />
              </van-grid-item>
              <van-grid-item>
                <van-image src="https://img.yzcdn.cn/vant/cat.jpeg" />
              </van-grid-item>
            </van-grid>
          </div>
          <div class="article article-two" v-else-if="article.cover.type === 1">
            <h3 class="title">{{article.title}}</h3>
            <div class="pic">
              <van-image cover src="https://img.yzcdn.cn/vant/cat.jpeg" />
            </div>
          </div>
          <div class="article" v-else>
            <h3 class="title">{{article.title}}</h3>
          </div>
          <div class="article-footer">
            <div class="left">
              <span class="item">{{article.aut_name}}</span>
              <span class="item">{{article.comm_count}}评论</span>
              <span class="item">{{article.pubdate | relativeTime}}</span>
            </div>
            <span class="right iconfont iconfont-guanbi"></span>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { requestArticles } from '@/api/home.js'
export default {
  name: 'Articles',
  props: {
    channelId: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      // 频道文章列表数据
      articleList: [
        // {
        //   art_id: 134304,
        //   aut_id: 2,
        //   aut_name: '翔爷',
        //   ch_id: 16,
        //   collect_count: 0,
        //   comm_count: 0,
        //   cover: {
        //     type: 3,
        //     images: [
        //       'https://img-blog.csdn.net/20170708155617159?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9yZXpw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast',
        //       'https://img-blog.csdn.net/20170708155617159?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9yZXpw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast',
        //       'https://img-blog.csdn.net/20170708155617159?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9yZXpw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast'
        //     ]
        //   },
        //   is_top: 0,
        //   like_count: 0,
        //   pubdate: '2018-11-29T17:13:05',
        //   title: '史上最简单的 SpringCloud 教程 | 终章'
        // },
        // {
        //   art_id: 134304,
        //   aut_id: 2,
        //   aut_name: '翔爷',
        //   ch_id: 16,
        //   collect_count: 0,
        //   comm_count: 0,
        //   cover: {
        //     type: 1,
        //     images: [
        //       'https://img-blog.csdn.net/20170708155617159?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9yZXpw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast'
        //     ]
        //   },
        //   is_top: 0,
        //   like_count: 0,
        //   pubdate: '2018-11-29T17:13:05',
        //   title: '史上最简单的 SpringCloud 教程 | 终章'
        // },
        // {
        //   art_id: 134304,
        //   aut_id: 2,
        //   aut_name: '翔爷',
        //   ch_id: 16,
        //   collect_count: 0,
        //   comm_count: 0,
        //   cover: {
        //     type: 0,
        //     images: []
        //   },
        //   is_top: 0,
        //   like_count: 0,
        //   pubdate: '2018-11-29T17:13:05',
        //   title: '史上最简单的 SpringCloud 教程 | 终章'
        // }
      ],
      // 时间戳，请求新的推荐数据传当前的时间戳(null)，请求历史推荐传指定的时间戳(不是null时，存放上一次的时戳)
      pre_timestamp: null,
      loading: false,
      error: false,
      finished: false,
      refreshing: false
    }
  },
  mounted () {
    console.log(this.channelId)
  },
  methods: {
    async onLoad () {
      try {
        const { data } = await requestArticles(this.channelId, this.pre_timestamp || new Date().getTime())
        console.log(data)
        // 如果是下拉刷新，拿到数据后需要关闭刷新提示
        if (this.refreshing) {
          // 清空列表数据
          this.articleList = []
          this.finished = false
          this.refreshing = false
        }
        // 添加获取到的新闻列表到原有的列表中
        this.articleList.push(...data.data.results)
        this.pre_timestamp = data.data.pre_timestamp
        this.loading = false
        // 如果返回的新闻列表数据为空，代表加载已经到底了
        if (data.data.results.length === 0) {
          this.finished = true
        }
      } catch (err) {
        // 如果是下拉刷新，且拿数据失败，也要关闭刷新提示
        if (this.refreshing) {
          // 清空列表数据
          this.articleList = []
          this.finished = false
          this.refreshing = false
        }
        // 不论加载成功或失败，都要关闭loading
        this.loading = false
        // 失败显示提示
        this.error = true
      }
    },
    onRefresh () {
      // 重新加载数据
      this.pre_timestamp = null
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    }
  }
}

</script>
<style scoped lang="less">
.article-wrap {
  padding: 13px 11px 15px;
  .title {
    font-size: 16px;
    color: #3A3A3A;
    margin: 0;
    line-height: 22px;
  }
  .pics {
    margin: 14px 0 15px;
    .van-grid-item {
      height: 73px;
      /deep/ .van-grid-item__content {
        padding: 0 1px;
        .van-image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .article-two {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    .title {
      flex: 1;
      margin-right: 12px;
    }
    .pic {
      width: 116px;
      height: 73px;
      /deep/ .van-image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #999999;
    line-height: 1em;
    margin-top: 9px;
    .left {
      .item {
        padding-right: 14px;
      }
    }
    .right {
      font-size: 10px;
      color: #999999;
    }
  }
}
</style>
